@import (reference) "less-nameset";
/* ---------- messagetip ---------- */
.wi-messagetip-box {
    position:fixed;
    z-index: 1000;
    border-radius: @border-radius @border-radius 0 0;
    border: solid @border-size @border-c;
    overflow: hidden;
}
.wi-messagetip-head {
    .messagetip-head-style();
    width: 100%;
    padding: 0 2em 0 2*@title-padding;// 右侧padding为关闭按钮宽度
    height: @messagetip-head-h;
    line-height: @messagetip-head-h;
    position: relative;
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.wi-messagetip-close {
    position: absolute;
    right:0;
    width:2em;
    text-align:center; line-height: inherit;
    color: @tool-color;
    cursor: pointer;
    font-size: @font-size+3px;
}
.wi-messagetip-close:hover,
.wi-messagetip-close:active { color: @title-color;}

.wi-messagetip-content {
    background: @bg;
    margin: 0 auto;
    padding: @cont-padding;
    position: relative;
    overflow: auto;
    width: 100%;
    height: 100%;
}
.wi-messagetip-head + .wi-messagetip-content{
    height: calc(100% - 30px);
}

@-webkit-keyframes shake-hard {
    0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
    2% { -webkit-transform: translate(-5px, -7px) rotate(-3.5deg); }
    4% { -webkit-transform: translate(-9px, -7px) rotate(-0.5deg); }
    6% { -webkit-transform: translate(-3px, -1px) rotate(-0.5deg); }
    8% { -webkit-transform: translate(2px, -8px) rotate(-3.5deg); }
    10% { -webkit-transform: translate(-2px, -4px) rotate(0.5deg); }
    12% { -webkit-transform: translate(-8px, 6px) rotate(2.5deg); }
    14% { -webkit-transform: translate(-1px, 3px) rotate(-0.5deg); }
    16% { -webkit-transform: translate(-7px, 0px) rotate(1.5deg); }
    18% { -webkit-transform: translate(-6px, -6px) rotate(2.5deg); }
    20% { -webkit-transform: translate(-8px, 5px) rotate(2.5deg); }
    22% { -webkit-transform: translate(-3px, 1px) rotate(-1.5deg); }
    24% { -webkit-transform: translate(-7px, 5px) rotate(0.5deg); }
    26% { -webkit-transform: translate(1px, 8px) rotate(0.5deg); }
    28% { -webkit-transform: translate(-4px, 5px) rotate(2.5deg); }
    30% { -webkit-transform: translate(-4px, -2px) rotate(-0.5deg); }
    32% { -webkit-transform: translate(2px, -2px) rotate(-1.5deg); }
    34% { -webkit-transform: translate(-3px, 6px) rotate(-3.5deg); }
    36% { -webkit-transform: translate(4px, 5px) rotate(-0.5deg); }
    38% { -webkit-transform: translate(-4px, -4px) rotate(-0.5deg); }
    40% { -webkit-transform: translate(-8px, 3px) rotate(-0.5deg); }
    42% { -webkit-transform: translate(-2px, -8px) rotate(0.5deg); }
    44% { -webkit-transform: translate(-2px, 8px) rotate(-3.5deg); }
    46% { -webkit-transform: translate(-1px, -6px) rotate(-2.5deg); }
    48% { -webkit-transform: translate(-8px, 7px) rotate(-2.5deg); }
    50% { -webkit-transform: translate(4px, -10px) rotate(1.5deg); }
    52% { -webkit-transform: translate(-9px, 8px) rotate(-1.5deg); }
    54% { -webkit-transform: translate(2px, -6px) rotate(-2.5deg); }
    56% { -webkit-transform: translate(-6px, -4px) rotate(-3.5deg); }
    58% { -webkit-transform: translate(8px, 8px) rotate(1.5deg); }
    60% { -webkit-transform: translate(-2px, -7px) rotate(-3.5deg); }
    62% { -webkit-transform: translate(-7px, -6px) rotate(0.5deg); }
    64% { -webkit-transform: translate(0px, 7px) rotate(1.5deg); }
    66% { -webkit-transform: translate(-3px, -3px) rotate(2.5deg); }
    68% { -webkit-transform: translate(4px, 1px) rotate(2.5deg); }
    70% { -webkit-transform: translate(2px, 3px) rotate(0.5deg); }
    72% { -webkit-transform: translate(4px, -10px) rotate(-0.5deg); }
    74% { -webkit-transform: translate(-1px, 7px) rotate(0.5deg); }
    76% { -webkit-transform: translate(-3px, 3px) rotate(-3.5deg); }
    78% { -webkit-transform: translate(-2px, 9px) rotate(-2.5deg); }
    80% { -webkit-transform: translate(7px, -5px) rotate(-3.5deg); }
    82% { -webkit-transform: translate(-8px, 8px) rotate(-0.5deg); }
    84% { -webkit-transform: translate(5px, 8px) rotate(-3.5deg); }
    86% { -webkit-transform: translate(4px, 0px) rotate(1.5deg); }
    88% { -webkit-transform: translate(-7px, 4px) rotate(2.5deg); }
    90% { -webkit-transform: translate(4px, 8px) rotate(0.5deg); }
    92% { -webkit-transform: translate(0px, -3px) rotate(-3.5deg); }
    94% { -webkit-transform: translate(7px, -3px) rotate(1.5deg); }
    96% { -webkit-transform: translate(-6px, -6px) rotate(0.5deg); }
    98% { -webkit-transform: translate(-4px, 7px) rotate(-2.5deg); }
}

@-ms-keyframes shake-hard {
    0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
    2% { -ms-transform: translate(2px, 5px) rotate(2.5deg); }
    4% { -ms-transform: translate(-5px, 8px) rotate(2.5deg); }
    6% { -ms-transform: translate(-7px, 7px) rotate(0.5deg); }
    8% { -ms-transform: translate(2px, 3px) rotate(-1.5deg); }
    10% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
    12% { -ms-transform: translate(7px, 5px) rotate(-3.5deg); }
    14% { -ms-transform: translate(3px, 2px) rotate(1.5deg); }
    16% { -ms-transform: translate(-1px, -1px) rotate(-1.5deg); }
    18% { -ms-transform: translate(-3px, -7px) rotate(-3.5deg); }
    20% { -ms-transform: translate(5px, 0px) rotate(2.5deg); }
    22% { -ms-transform: translate(1px, -10px) rotate(-1.5deg); }
    24% { -ms-transform: translate(-6px, -3px) rotate(2.5deg); }
    26% { -ms-transform: translate(-4px, 5px) rotate(2.5deg); }
    28% { -ms-transform: translate(-6px, 0px) rotate(-3.5deg); }
    30% { -ms-transform: translate(-1px, 6px) rotate(-2.5deg); }
    32% { -ms-transform: translate(8px, 2px) rotate(-2.5deg); }
    34% { -ms-transform: translate(-4px, -2px) rotate(2.5deg); }
    36% { -ms-transform: translate(8px, 8px) rotate(-0.5deg); }
    38% { -ms-transform: translate(-8px, -6px) rotate(-3.5deg); }
    40% { -ms-transform: translate(3px, -2px) rotate(-0.5deg); }
    42% { -ms-transform: translate(1px, 5px) rotate(-1.5deg); }
    44% { -ms-transform: translate(6px, 2px) rotate(0.5deg); }
    46% { -ms-transform: translate(-6px, -1px) rotate(-0.5deg); }
    48% { -ms-transform: translate(-5px, 5px) rotate(-1.5deg); }
    50% { -ms-transform: translate(6px, 6px) rotate(-2.5deg); }
    52% { -ms-transform: translate(-1px, 9px) rotate(0.5deg); }
    54% { -ms-transform: translate(-3px, 7px) rotate(2.5deg); }
    56% { -ms-transform: translate(7px, 5px) rotate(0.5deg); }
    58% { -ms-transform: translate(-8px, -4px) rotate(-0.5deg); }
    60% { -ms-transform: translate(-6px, -5px) rotate(0.5deg); }
    62% { -ms-transform: translate(8px, -8px) rotate(-2.5deg); }
    64% { -ms-transform: translate(-2px, -5px) rotate(-2.5deg); }
    66% { -ms-transform: translate(-5px, -7px) rotate(2.5deg); }
    68% { -ms-transform: translate(3px, -3px) rotate(-2.5deg); }
    70% { -ms-transform: translate(3px, 8px) rotate(-2.5deg); }
    72% { -ms-transform: translate(-3px, -3px) rotate(-3.5deg); }
    74% { -ms-transform: translate(-8px, -4px) rotate(-2.5deg); }
    76% { -ms-transform: translate(-8px, -5px) rotate(-1.5deg); }
    78% { -ms-transform: translate(6px, -10px) rotate(0.5deg); }
    80% { -ms-transform: translate(-9px, -3px) rotate(-3.5deg); }
    82% { -ms-transform: translate(6px, 5px) rotate(-3.5deg); }
    84% { -ms-transform: translate(-4px, 5px) rotate(-0.5deg); }
    86% { -ms-transform: translate(-3px, -3px) rotate(0.5deg); }
    88% { -ms-transform: translate(3px, -7px) rotate(-2.5deg); }
    90% { -ms-transform: translate(-1px, 2px) rotate(-1.5deg); }
    92% { -ms-transform: translate(2px, 5px) rotate(2.5deg); }
    94% { -ms-transform: translate(-2px, 1px) rotate(-2.5deg); }
    96% { -ms-transform: translate(-5px, -2px) rotate(-0.5deg); }
    98% { -ms-transform: translate(-6px, 8px) rotate(-2.5deg); }
}

@keyframes shake-hard {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    2% { transform: translate(-8px, -1px) rotate(0.5deg); }
    4% { transform: translate(-3px, 3px) rotate(-2.5deg); }
    6% { transform: translate(-4px, -2px) rotate(-2.5deg); }
    8% { transform: translate(-8px, -5px) rotate(-3.5deg); }
    10% { transform: translate(-2px, -10px) rotate(0.5deg); }
    12% { transform: translate(0px, -9px) rotate(-1.5deg); }
    14% { transform: translate(-8px, 7px) rotate(-0.5deg); }
    16% { transform: translate(-2px, 8px) rotate(-1.5deg); }
    18% { transform: translate(1px, 9px) rotate(1.5deg); }
    20% { transform: translate(5px, 7px) rotate(-2.5deg); }
    22% { transform: translate(0px, 2px) rotate(-2.5deg); }
    24% { transform: translate(0px, 7px) rotate(-1.5deg); }
    26% { transform: translate(-9px, 4px) rotate(-3.5deg); }
    28% { transform: translate(3px, -1px) rotate(1.5deg); }
    30% { transform: translate(6px, 2px) rotate(1.5deg); }
    32% { transform: translate(-8px, -8px) rotate(-3.5deg); }
    34% { transform: translate(9px, 5px) rotate(-1.5deg); }
    36% { transform: translate(-2px, 7px) rotate(-0.5deg); }
    38% { transform: translate(0px, 0px) rotate(2.5deg); }
    40% { transform: translate(0px, -10px) rotate(-3.5deg); }
    42% { transform: translate(3px, -4px) rotate(0.5deg); }
    44% { transform: translate(-1px, -10px) rotate(0.5deg); }
    46% { transform: translate(0px, 1px) rotate(2.5deg); }
    48% { transform: translate(-1px, 1px) rotate(2.5deg); }
    50% { transform: translate(7px, 4px) rotate(-0.5deg); }
    52% { transform: translate(-10px, -5px) rotate(1.5deg); }
    54% { transform: translate(-1px, 6px) rotate(-1.5deg); }
    56% { transform: translate(-9px, 9px) rotate(-3.5deg); }
    58% { transform: translate(8px, 2px) rotate(2.5deg); }
    60% { transform: translate(9px, 1px) rotate(-1.5deg); }
    62% { transform: translate(-3px, -2px) rotate(-2.5deg); }
    64% { transform: translate(-3px, 8px) rotate(0.5deg); }
    66% { transform: translate(-8px, 8px) rotate(0.5deg); }
    68% { transform: translate(0px, 9px) rotate(2.5deg); }
    70% { transform: translate(3px, -9px) rotate(2.5deg); }
    72% { transform: translate(3px, -5px) rotate(-3.5deg); }
    74% { transform: translate(-10px, 2px) rotate(-1.5deg); }
    76% { transform: translate(2px, 2px) rotate(1.5deg); }
    78% { transform: translate(2px, -3px) rotate(0.5deg); }
    80% { transform: translate(-4px, -7px) rotate(-1.5deg); }
    82% { transform: translate(-9px, 0px) rotate(-0.5deg); }
    84% { transform: translate(-5px, 5px) rotate(-3.5deg); }
    86% { transform: translate(-8px, -3px) rotate(2.5deg); }
    88% { transform: translate(2px, -5px) rotate(-1.5deg); }
    90% { transform: translate(-5px, 0px) rotate(-2.5deg); }
    92% { transform: translate(1px, -5px) rotate(1.5deg); }
    94% { transform: translate(-8px, -8px) rotate(0.5deg); }
    96% { transform: translate(-6px, -8px) rotate(2.5deg); }
    98% { transform: translate(1px, 0px) rotate(1.5deg); }
}